<template>
  <div class="home">
      <div class="header-flex">
           <div @click="isSortTime">
                <span>日期</span>
                <van-icon :name="isDate?'arrow-up':'arrow-down'" />
           </div>
            <div @click="isSortMoney">
                <span>薪资</span>
                <van-icon :name="isMoney?'arrow-up':'arrow-down'" />
            </div>
             <div @click="isSortAge">
                <span>年龄</span>
                <van-icon :name="isAge?'arrow-up':'arrow-down'" />
             </div>
      </div>
      <!-- 职位列表 -->
      <div class="con">
        <!-- url上有问号，就是query传参  ？后面就是参数 以键值对出现 -->
         <work-item v-for="(item,index) in list" :key="index" :item="item" :index="index" @click="$router.push('/about?index='+index)"></work-item>
      </div>
      <!-- 按钮 -->
      <van-button type="primary" block class="btn" @click="$router.push('/about')">添加职位</van-button>

  </div>
</template>

<script>
// @ is an alias to /src
import workItem from '@/components/workItem.vue'
import {ref,reactive,toRefs,computed} from 'vue'
import {useStore} from 'vuex'
export default {
//   name: 'HomeView',
setup(props) {
    const {state} = useStore()
   const data =  reactive({
      isDate:false,//false是升序    true降序
      list:computed(()=>state.list),
      isMoney:false,//false是升序    true降序
      isAge:false//false是升序    true降序
   })
//    点击日期
const isSortTime=()=>{
    data.isDate = !data.isDate
  
    // 置顶的   arr1
    let arr1 = state.list.filter(item=>item.checked == '1').sort((a,b)=>{
         return  data.isDate?b.time-a.time:a.time-b.time
    })
    // 不置顶的
    let arr2= state.list.filter(item=>item.checked == '2').sort((a,b)=>{
         return  data.isDate?b.time-a.time:a.time-b.time
    })
    state.list = [...arr1,...arr2]

}
// 薪资排序
const isSortMoney = ()=>{
    data.isMoney = !data.isMoney
    state.list.sort((a,b)=>{
        let prev = (a.lowMoney + a.higMoney) / 2
        console.log(prev);
        let next  = (b.lowMoney + b.higMoney) / 2

        return data.isMoney?next-prev:prev-next
    })

}
// 年龄排序
const isSortAge=()=>{
    data.isAge = !data.isAge
    state.list.sort((a,b)=>{
        let prev = (a.age[0]+a.age[1]) / 2
        let next = (b.age[0]+b.age[1]) / 2
        return data.isAge?next-prev:prev-next
    })
}

   return {...toRefs(data),isSortTime,isSortMoney,isSortAge}
},
  components: {
    workItem
  }
}
</script>
<style lang="scss" scoped>
.home{
    background: #f5f5f5;
    height: 100vh;
}
.header-flex{
    display: flex;
    height: 50px;
    align-items: center;
    width:100%;
    background: #fff;
    >div{
        flex:1;
        text-align: center;
    }
}
.btn{
    position: fixed;
    bottom: 0;
    left:0;
}
</style>

